//View
function View(parent){
	this.parent=parent;
	this.game = parent.game;
			
	this.imgDeck = [];
	
	//DIMENSIONS
	this.width = this.game.width;
	this.height = this.game.height;
	
	this.hudWidth = 250;
	this.hudX = this.game.width-this.hudWidth;
	this.hudOffsetX = 50;
	this.hudOffsetY = 50;
	this.hudOffsetPlayersY = 100;
	this.hudOffsetNameY = 25+this.hudOffsetY;
	this.hudOffsetCardsY = 50+this.hudOffsetY;
	
	this.tempHandCardX = 250;
	this.tempHandCardY = 125;

	
	//**************************
	var canvas = document.getElementById("canvas"); 
	if (canvas.getContext) {  
		ctx = canvas.getContext("2d");
	}
	ctx.fillStyle = "black";
	ctx.fillRect(0,0,this.width,this.height);
	
	this.loadImages();
}

View.prototype.redraw= function(){

	this.deleteCanvas();
	this.drawHud();
	this.drawOwnCards(this.game.playerList[0].hand);
	this.drawTempHand(this.game.playerList[0].tempHand);
	this.drawLastHand();
}

View.prototype.loadImages = function() {
	console.log("********CREATING IMAGES**********");
	var deck = new Deck();
	var size = Object.size(deck.cardList);
	for (var i=0;i<size;i++) {
		var temp = new Image();
		temp.src = deck.cardList[i].src;
		temp.name = deck.cardList[i].name;
		this.imgDeck.push(temp);
	}
}

View.prototype.drawOwnCards = function(cardList) {
	//console.log("DRAWING CARDS***************");
	var size = Object.size(cardList);
	for (var i=0; i < size;i++) {
		for (var j=0; j < this.imgDeck.length; j++) {
			if (cardList[i].name == this.imgDeck[j].name) {
				if (cardList[i].highlightSameValue || cardList[i].highlightClicked) {
					if (cardList[i].highlightClicked)
						ctx.strokeStyle = 'green';
					else if (cardList[i].highlightSameValue)
						ctx.strokeStyle = 'blue';					
				}
				else
					ctx.strokeStyle = 'black';
				ctx.drawImage(this.imgDeck[j], cardList[i].x,cardList[i].y, cardList[i].width, cardList[i].height);
				ctx.beginPath();
				ctx.rect(cardList[i].x,cardList[i].y, cardList[i].width, cardList[i].height);
				ctx.lineWidth = 3;
				ctx.stroke();
			}
		}	
	}
}

View.prototype.drawLastHand = function() {
	var size = Object.size(this.game.hands);
	for (var i=0; i < size;i++) {
		for (var j=0;j<this.game.hands[i].length;j++){		
			for (var k=0; k < this.imgDeck.length; k++) {
				if (this.game.hands[i][j].name == this.imgDeck[k].name) {
					ctx.drawImage(this.imgDeck[k], 100+(j*50),300+(i*100), this.imgDeck[k].width, this.imgDeck[k].height);
				}
			}	
		}
	}

}

View.prototype.drawTempHand = function(cardList) {
	var size = Object.size(cardList);
	for (var i=0; i < size;i++) {
		for (var j=0; j < this.imgDeck.length; j++) {
			if (cardList[i].name == this.imgDeck[j].name) {
				ctx.drawImage(this.imgDeck[j], this.tempHandCardX+(i*75),this.tempHandCardY, cardList[i].width, cardList[i].height);
			}
		}	
	}
}

View.prototype.drawHud = function() {
	ctx.fillStyle = "grey";
	ctx.fillRect(this.hudX,0,this.hudWidth,this.height);
	ctx.fillStyle = "blue";
	ctx.font="20px Georgia";
	for (var i=0; i < this.game.rankList.length;i++) {
		if (this.game.rankList[i].turn) {
			ctx.fillStyle = "white";
		}
		else {
			ctx.fillStyle = "blue";
		}
		var rank = this.game.rankListNames[this.game.rankList[i].position];
		ctx.fillText(rank,this.hudX+this.hudOffsetX,this.hudOffsetY+(i*this.hudOffsetPlayersY));
		ctx.fillText(this.game.rankList[i].name,this.hudX+this.hudOffsetX,this.hudOffsetNameY+(i*this.hudOffsetPlayersY));
		ctx.fillText(this.game.rankList[i].hand.length+ " cards",this.hudX+this.hudOffsetX,this.hudOffsetCardsY+(i*this.hudOffsetPlayersY));
	}
	
	var text = "X: " +this.parent.game.mouseX + " Y: " + this.parent.game.mouseY;
	ctx.fillText(text,this.hudX+100,550);
	
	ctx.fillStyle = this.game.readyBox.bgColor;
	ctx.fillRect(this.game.readyBox.x,this.game.readyBox.y,this.game.readyBox.width,this.game.readyBox.height);
	ctx.fillStyle = this.game.readyBox.textColor;
	ctx.fillText(this.game.readyBox.text,this.game.readyBox.textX,this.game.readyBox.textY);
	
	ctx.fillStyle = this.game.passBox.bgColor;
	ctx.fillRect(this.game.passBox.x,this.game.passBox.y,this.game.passBox.width,this.game.passBox.height);
	ctx.fillStyle = this.game.passBox.textColor;
	ctx.fillText(this.game.passBox.text,this.game.passBox.textX,this.game.passBox.textY);
}

View.prototype.deleteCanvas = function() {
	ctx.fillStyle = "black";
	ctx.fillRect(0,0,this.width,this.height);
}